<template>
  <div class="home_page">
    <!-- 头部 -->
    <CommonHeader :balance="gemsNum" />
    <div class="home_content">
      <div class="content_top">
        <!-- banner图 -->
        <videoBar title="Remove OFF" />
        <!-- 文件上传 -->
        <uploadBar @uploadStatus="uploadStatus" title="Whose do you want to remove off？" />
      </div>
      <!-- 确认提交按钮 -->
      <div class="comfirm_btn_wrap">
        <ComfirmBtn btnName="Remove Off" :gemsNum="gemsNum" :diamondNum="diamondNum" :isShowDiamond="isShowDiamond"
          @comfrim="removeOff" />
      </div>
      <div class="bottom_line"></div>
      <!-- 探索更多AI功能 -->
      <div class="more_features">
        <h2>Explore more AI features</h2>
        <MoreAIFeatures />
        <div class="line_bottom"></div>
      </div>
      <!-- 常见问题 -->
      <div class="fap_wrap">
        <FAQ />
      </div>
      <!-- 底部 -->
      <CommonFooter />
      <!-- 底部悬浮按钮 -->
      <AddToHomeScreen />
    </div>
    <!-- 错误消息提示 -->
    <van-toast v-model:show="errorShow" style="padding: 0" :duration="5000" class-name="error_toast">
      <template #message>
        {{ errorMsg }}
      </template>
    </van-toast>
  </div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";
import { useRouter } from "vue-router";
import videoBar from "@/components/VideoBar.vue";
import uploadBar from "@/components/UploadBar.vue";
import CommonHeader from "@/components/CommonHeader.vue";
import MoreAIFeatures from "@/components/MoreAIFeatures.vue";
import FAQ from "@/components/FAQ.vue";
import CommonFooter from "@/components/CommonFooter.vue";
import AddToHomeScreen from "@/components/AddToHomeScreen.vue";
import ComfirmBtn from "@/components/ComfirmBtn.vue";
import api from "@/api";
import { showToast } from "vant";
import { trackEvent } from '@/utils/firebase';

const router = useRouter();

const gemsNum = ref("");
const diamondNum = ref("100");
const isShowDiamond = ref(false);
const ossUrl = ref(""); // oss上传成功返回的url
// 文件上传oss成功
const uploadStatus = (obj) => {
  if (obj.status) {
    ossUrl.value = obj.url;
    isShowDiamond.value = true;
  } else {
    ossUrl.value = "";
    isShowDiamond.value = false;
  }
};

// 查询积分余额
const queryBalance = async () => {
  try {
    const res = await api.pointsBalance();
    gemsNum.value = String(res.data.balance);
  } catch (err) {
    console.log(err);
  }
};

onMounted(() => {
  queryBalance();
  trackEvent('进入首页Remove', { id: '100020' });//埋点
});

let errorMsg = ref("");
const errorShow = ref(false);

// 提交 remove off创作
const removeOff = async () => {
  //trackEvent('removeOff', { form: 'remove' });
  if (ossUrl.value) {
    // 将图片存本地
    sessionStorage.setItem("removeossUrl", ossUrl.value);
    // 多保存一张图片，用于从“/removeCreating”页面点击“ai pose”跳到‘/createStep“回显
    sessionStorage.setItem("removeOSS", ossUrl.value);

    const params = {
      originFileUrl: ossUrl.value,
      typeCode: 3,
      isTakeOff: 1
    };
    // 积分不足时
    if (Number(gemsNum.value) < 100) {
      // 将基本参数保存，等充值成功后，在 /purchaseSuccessful页面提交任务--跳转制作页面
      sessionStorage.setItem('goPay', JSON.stringify({
        params: params,
        from: 'remove'
      }));
      router.push('/myDiamonds');
      return;
    }
    // 积分充足时，提交任务，跳转创作页面
    try {
      const res = await api.taskSubmit(params);
      router.push({
        path: "/removeCreating",
        query: {
          taskNo: res.data.taskNo,
          from: "remove",
        },
      });
    } catch (err) {
      console.log(err);
      errorMsg.value = err.message;
      errorShow.value = true;
    }
    trackEvent('首页RemoveOff_点击【RemoveOff】', { id: '100024' });
  } else {
    showToast("Upload the picture first");
  }
};
</script>

<style lang="less">
.home_page {
  width: 100%;
  // background: #fbfbfd;
  box-sizing: border-box;
  /* 背景图设置 */
  background-image: url("../assets/images/bg_texture@2x.png");
  background-position: top center;
  /* 从顶部开始 */
  background-repeat: no-repeat;
  /* 不重复 */
  background-size: 100% auto;
  /* 宽度满屏，高度自适应 */
  background-color: #fbfbfd;
  padding-top: 64px;
  padding-bottom: 40px;

  .home_content {
    padding: 0 16px;
    box-sizing: border-box;

    .content_top {
      width: 100%;
      min-height: 423px;
      // background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.75) 100%);
      border-radius: 8px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      padding: 12px;
      background: #fff;
    }

    .more_features {
      width: 100%;
      box-sizing: border-box;
      margin-top: 24px;

      h2 {
        font-size: 20px;
        color: #000000;
        font-weight: 700;
        text-align: center;
        margin-bottom: 16px;
      }

      .line_bottom {
        width: 100%;
        height: 1px;
        background: rgba(0, 0, 0, 0.1);
      }
    }

    .fap_wrap {}
  }
}

@media (min-width: 1024px) {}
</style>
